<template>
  <div class="date-select-content">
    <div class="date-from" @click="dateFromSelect">
      <p class="date-form-show">{{ calendarFromData }}</p>
      <p class="week-from-show">{{ weekFromData }}</p>
    </div>
    <div class="date-to"  @click="dateToSelect">
      <div class="date-to-show" v-show="isShowDateTo">
        <p class="date-to-show">{{ calendarToData }}</p>
        <p class="week-to-show">{{ weekToData }}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default ({
    name: 'date-select',
    props: {
      calendarFromData: {
        type: String,
        default: ''
      },
      weekFromData: {
        type: String,
        default: ''
      },
      calendarToData: {
        type: String,
        default: ''
      },
      weekToData: {
        type: String,
        default: ''
      },
      isShowDateTo: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      dateFromSelect() {
        this.$emit('dateFromSelect')
      },
      dateToSelect() {
        this.$emit('dateToSelect')
      }
    }
  })
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .date-select-content {
    display: flex;
    width: 100%;
    height: 3rem;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ddd;
    > div {
      display: flex;
      flex: 1;
      align-items: flex-end;
      justify-content: center;
       p {
        display: inline-block;
      }
       p:nth-child(1) {
        font-size: 1rem;
      }
       p:nth-child(2) {
         margin-left: .25rem;
        font-size: .65rem;
        color: #999;
      }
    }
    .date-to-show {
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
  }
</style>
